$fontSizeM: 18px;
$fontSizeL: 22px;
$normalColor: #12F442;
$warningColor: #F66C07;
$overtimeColor: #F62E07;
$completeColor: #0068B7;
$fontColor: #F3F6F7;

p {margin: 0;padding: 0;}
// 背景颜色
.normal-bgcolor {background-color: $normalColor;}
.warning-bgcolor {background-color: $warningColor;}
.overtime-bgcolor {background-color: $overtimeColor;}
.complete-bgcolor {background-color: $completeColor;}

//  字体颜色
.normal-color {color: $normalColor;}
.warning-color {color: $warningColor;}
.overtime-color {color: $overtimeColor;}
.complete-color {color: $completeColor;}

.box {margin-bottom: 8px;background:rgba(0,104,183,0.2);border-radius:4px;padding: 1px 8px;}

.tit {display: flex;position: relative;
  .tit-col {width:10px;height:22px;margin-right: 5px;top: 6px;position: relative;}
  .tit-tit {font-size: $fontSizeL;margin-right: 5px;}
  .tit-ot {font-size: $fontSizeM;padding-top: 5px;
    :nth-child(2), :nth-child(3),:nth-child(4) {margin-left: 15px;}
  }
  .tit-type {font-size: $fontSizeM;padding-top: 5px;position: absolute;right: 0.5%;}
}

.con {margin:5px 0px;background:rgba(2,11,46,0.5);color: $fontColor;
  .con-bg {padding: 1px 8px;
    .con-sp {padding: 2px;display: flex;table-layout: fixed;
      div {padding-right: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
      :first-child {width: 53%;}
      :nth-child(2) {width: 28%;}
      :nth-child(3) {width: 17%;}
    }
  }
}

.tab {margin: 5px 0px;border:1px solid #00479D;color: $fontColor;
  .tab-bg {padding: 1px 8px;
    .tab-sp {padding: 2px;display: flex;table-layout: fixed;
      div {padding-right: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
      :first-child {width: 47%;}
      :nth-child(2) {width: 27%;
        span {display: inline-block;width:12px;height:12px;border-radius: 50%;}
      }
      :nth-child(3) {width: 25%;}
    }
  }
}

.fwgd {margin:5px 0px;background:rgba(2,11,46,0.5);color: $fontColor;
  .tab-fwgd {
    .fwgd-head {display: flex;background:#020B2E;line-height: 28px;color: #A4A4A4;
      :first-child {margin-left: 12px;}
      div {padding-right: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    }
    .fwgd-sp {padding: 1px;margin-left: 8px;display: flex;table-layout: fixed;
      div {padding-right: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
      :first-child {width: 42%;}
      :nth-child(2),:nth-child(3) {width: 16%;}
      :nth-child(4) {width: 25%;}
    }
  }
}


/* 1920/1080/1600 分辨率的显示器 */
@media (max-width:1900px) {
  .box {margin-bottom: 5px;padding: 1px 5px;}
  .tit {
    .tit-col {width:5px;height:16px;}
    .tit-tit {font-size: $fontSizeM;}
    .tit-ot {font-size: 14px;padding-top: 3px;
      :nth-child(2),:nth-child(3),:nth-child(4) {margin-left: 8px;}
    }
    .tit-type {font-size: 14px;padding-top: 3px;}
  }
  .con {margin:3px 0px;
    .con-bg {
      padding: 1px 5px;
      .con-sp {padding: 0px;
        div {padding-right: 3px;}
      }
    }
  }
  .fwgd {margin:3px 0px;
    .tab-fwgd {
      .fwgd-head {line-height: 20px;}
      .fwgd-sp {padding: 0px;
        div {padding-right: 3px;}
        :first-child {width: 42%;}
      }
    }
  }
  .tab {margin: 3px 0px;
    .tab-bg {
      .tab-sp {padding: 0px;
        div {padding-right: 3px;}
        :nth-child(2) { span {width:9px;height:9px;} }
      }
    }
  }
}
